<template>
  <main class="hidden w-full h-full items-center justify-center @lg:flex <lg:flex bg-[#293146]">
    <header class="fixed top-0 left-0 w-full flex items-center justify-between p-3">
      <div class="flex gap-2 items-center -enter-x">
        <app-logo></app-logo>
        <span class="text-[#fefefe] font-bold text-lg">
          {{ title }}
        </span>
      </div>
      <div class="enter-x">
        <use-switch></use-switch>
      </div>
    </header>
    <div
      class="bg-[#fefefe] dark:(bg-[#293146] shadow-lg) rounded-[8px] p-8 shadow-dark-50 border border-solid border-transparent border-[#343e59]"
    >
      <div class="text-center font-bold text-[22px] mb-5 enter-x text-dark-900 dark:text-light-800">
        登录
      </div>
      <login-form></login-form>
      <div class="mt-12">
        <footer-icon></footer-icon>
      </div>
    </div>
  </main>
</template>

<script setup>
  import LoginForm from './LoginForm.vue';
  import FooterIcon from './FooterIcon.vue';
  const title = import.meta.env.VITE_GLOB_APP_TITLE;
</script>

<style scoped></style>
